<script setup>
import {ref,onMounted,onBeforeUnmount} from "vue"
import axios from 'axios'
import animeFanDetail1 from "../../../components/animeFanDetail1.vue"
import animeFanDetail2 from "../../../components/animeFanDetail2.vue"

import gdyg_ji1 from "../../../../public/images/anime/gdyg/gdyg_ji1.webp"
import gdyg_ji2 from "../../../../public/images/anime/gdyg/gdyg_ji2.webp"
import gdyg_ji3 from "../../../../public/images/anime/gdyg/gdyg_ji3.webp"
import gdyg_ji4 from "../../../../public/images/anime/gdyg/gdyg_ji4.webp"
import gdyg_ji5 from "../../../../public/images/anime/gdyg/gdyg_ji5.webp"
import gdyg_ji6 from "../../../../public/images/anime/gdyg/gdyg_ji6.webp"
import gdyg_ji7 from "../../../../public/images/anime/gdyg/gdyg_ji7.webp"
import gdyg_ji8 from "../../../../public/images/anime/gdyg/gdyg_ji8.webp"
import gdyg_ji9 from "../../../../public/images/anime/gdyg/gdyg_ji9.webp"
import gdyg_ji10 from "../../../../public/images/anime/gdyg/gdyg_ji10.webp"
import gdyg_ji11 from "../../../../public/images/anime/gdyg/gdyg_ji11.webp"
import gdyg_ji12 from "../../../../public/images/anime/gdyg/gdyg_ji12.webp"

//生命周期
onMounted(()=>{
    zpxq.value.style.color = "skyblue"
    xgsp.value.style.color = "black"
    funcBtn.value = 0
})
onBeforeUnmount(()=>{})

const gdygFanImageUrl = ref("")
const gdygFanName = ref("")

const zpxq = ref(null)
const xgsp = ref(null)
const jiBtn1_6 = ref(null)
const jiBtn7_12 = ref(null)
const funcBtn = ref(0)
const jiBtn = ref(0)

const gdygJiImage1 = ref(gdyg_ji1)
const gdygJiImage2 = ref(gdyg_ji2)
const gdygJiImage3 = ref(gdyg_ji3)
const gdygJiImage4 = ref(gdyg_ji4)
const gdygJiImage5 = ref(gdyg_ji5)
const gdygJiImage6 = ref(gdyg_ji6)
const gdygJiImage7 = ref(gdyg_ji7)
const gdygJiImage8 = ref(gdyg_ji8)
const gdygJiImage9 = ref(gdyg_ji9)
const gdygJiImage10 = ref(gdyg_ji10)
const gdygJiImage11 = ref(gdyg_ji11)
const gdygJiImage12 = ref(gdyg_ji12)

const fan1_name = ref("孤独的转机")
const fan2_name = ref("明天见")
const fan3_name = ref("救星赶来")
const fan4_name = ref("跳跃女孩(们)")
const fan5_name = ref("飞不了的鱼")
const fan6_name = ref("八景")
const fan7_name = ref("去你家")
const fan8_name = ref("孤独摇滚")
const fan9_name = ref("江之岛扶梯")
const fan10_name = ref("天黑以后")
const fan11_name = ref("十二进制的夕景")
const fan12_name = ref("愿你迎来黎明")


axios.get('/go1-api/anime/gdyg').then(async res=>{
    console.log(res.data[0])
    gdygFanImageUrl.value = await res.data[0].anime_image
    gdygFanName.value = await res.data[0].name
})

const changeBtn = (num) => {
    switch(num){
        case 0:
        zpxq.value.style.color = "skyblue"
        xgsp.value.style.color = "black"
        funcBtn.value = 0
            break
        case 1:
            zpxq.value.style.color = "black"
            xgsp.value.style.color = "skyblue"
            funcBtn.value = 1
            break
        default:
            break
    }
}
const jiBtnChange = (num) => {
    switch(num){
        case 1:
            jiBtn1_6.value.style.color = "#00a1d6"
            jiBtn7_12.value.style.color = "black"
            jiBtn.value = 0
            break
        case 2:
            jiBtn1_6.value.style.color = "black"
            jiBtn7_12.value.style.color = "#00a1d6"
            jiBtn.value = 1
            break
        default:
            break
    }
}

</script>

<template>
    
    <div class="gdygVideoAll">
        <div class="dialogBoxColor"></div>
        <div class="gdygDetailTitleBox">
            <animeFanDetail1 
                :fan_image="gdygFanImageUrl"
                :fan_name="gdygFanName"
                fan_type="漫画改"
                fan_theme1="音乐"
                fan_theme2="日常"
                fan_year="2022年10月8号开播"
                fan_status="已完结,全12话"/>
        </div>
        <div class="funcBox1">
            <span ref="zpxq" @click="changeBtn(0)">{{ "作品详情" }}</span>
            <span ref="xgsp" @click="changeBtn(1)">{{ "相关视频" }}</span>
        </div>
        <div class="detail1Box" v-if="funcBtn == 0">
            <div class="zpxq_master_box">
                <span class="zpxq_zp">正片</span>
                <div class="jiBtn1_6" ref="jiBtn1_6" @click="jiBtnChange(1)">第1话 - 第6话</div>
                <div class="jiBtn7_12" ref="jiBtn7_12" @click="jiBtnChange(2)">第7话 - 第12话</div>
                <div class="fan1" v-if="jiBtn == 0">
                    <animeFanDetail2 
                        :image1="gdygJiImage1"
                        :image2="gdygJiImage2"
                        :image3="gdygJiImage3"
                        :image4="gdygJiImage4"
                        :image5="gdygJiImage5"
                        :image6="gdygJiImage6"
                        ji_name1="第1话" ji_name2="第2话" ji_name3="第3话"
                        ji_name4="第4话" ji_name5="第5话" ji_name6="第6话" 
                        :fan_name1="fan1_name" :fan_name2="fan2_name" :fan_name3="fan3_name"
                        :fan_name4="fan4_name" :fan_name5="fan5_name" :fan_name6="fan6_name"
                        fan1_to="gdyg/1" fan2_to="gdyg/2" fan3_to="gdyg/3" fan4_to="gdyg/4"
                        fan5_to="gdyg/5" fan6_to="gdyg/6"
                    />
                </div>
                <div class="fan1" v-else-if="jiBtn == 1">
                    <animeFanDetail2 
                        :image1="gdygJiImage7"
                        :image2="gdygJiImage8"
                        :image3="gdygJiImage9"
                        :image4="gdygJiImage10"
                        :image5="gdygJiImage11"
                        :image6="gdygJiImage12"
                        ji_name1="第7话" ji_name2="第8话" ji_name3="第9话" 
                        ji_name4="第10话" ji_name5="第11话" ji_name6="第12话"
                        :fan_name1="fan7_name" :fan_name2="fan8_name" :fan_name3="fan9_name"
                        :fan_name4="fan10_name" :fan_name5="fan11_name" :fan_name6="fan12_name"
                        fan1_to="gdyg/7" fan2_to="gdyg/8" fan3_to="gdyg/9" fan4_to="gdyg/10"
                        fan5_to="gdyg/11" fan6_to="gdyg/12"
                    />
                </div>
                <span class="zpxq_pv">PV</span>
            </div>
        </div>
        <div class="detail1Box" v-else-if="funcBtn == 1">

        </div>
    </div>
</template>

<style scoped>
.gdygVideoAll{
    position: absolute;
    left: 0;
    top: 0;
    width: 1855px;
    height: 100%;
    /* background-color: red; */
    /* overflow: hidden; */
}
.dialogBoxColor{
    width: 100%;
    height: 6%;
    background: linear-gradient(to right,rgba(0,255,255,1),rgba(255,255,0,1));
}

.gdygDetailTitleBox{
    width: 100%;
    height: 45%;
}
.funcBox1{
    width: 100%;
    height: 8%;
    display: flex;
    align-items: center;
    background-color: #fff;
}
.funcBox1 span{
    margin-left: 20px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}
.funcBox1 span:hover{
    color: skyblue;
}
.detail1Box{
    width: 100%;
    height: 80%;
    background-color: rgb(244,245,247);
}

.zpxq_master_box{
    position: absolute;
    left: 12%;
    top: 62%;
    width: 60%;
    height: 70%;
    background-color: #fff;
    border-radius: 5px;
}
.zpxq_zp{
    position: absolute;
    left: 20px;
    top: 15px;
    font-size: 20px;
    font-weight: 600;
}
.jiBtn1_6{
    position: absolute;
    left: 100px;
    top: 17px;
    font-size: 15px;
    color: #00a1d6;
    border-bottom-color: #00a1d6;
    cursor: pointer;

}
.jiBtn1_6:hover{
    color: #00a1d6;
    border-bottom-color: #00a1d6;
}
.jiBtn7_12{
    position: absolute;
    left: 220px;
    top: 17px;
    font-size: 15px;
    cursor: pointer;
}
.jiBtn7_12:hover{
    color: #00a1d6;
    border-bottom-color: #00a1d6;
}
.fan1{
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 35%;
}

.zpxq_pv{
    position: absolute;
    left: 2%;
    top: 48%;
    width: 10%;
    height: 10%;
    font-size: 20px;
    font-weight: 600; 
}
</style>